import React, { FC, useEffect, useState } from 'react'
import { Dialog, Divider, Grid, Image, ImageViewer, Swiper, Space, Toast } from 'antd-mobile'
import ReportHome from './reportHome/index'
import Summarize from './summarize/index'
import LearningSituation from './learningSituation/index'
import CollegeData from './collegeData/index'
import Improve from './improve/index'
import BreakThrough from './breakThrough/index'
import { reportDetail } from '@/api/DiagnosisReport'
import './index.less'

const DiagnosisReport: FC<{}> = () => {
  const [loading, setLoading] = useState<boolean>(false)
  const [pageNum, setPageNum] = useState<number>(3)
  const changeFun = (index: number) => {
    if (index < 4 && pageNum < 6) {
      setPageNum(index + 3)
    }
  }
  useEffect(() => {
    getList()
  }, [])
  const getList = () => {
    setLoading(true)
    const params = {
      sn: 'aduijASDKL23sfnkadFOQWENlqu0asd132i9asd132',
    }
    reportDetail(params).then((res) => {
      setLoading(false)
      console.log(res)
    })
  }
  return (
    <div className="w-full bg-white main">
      <Swiper
        direction="vertical"
        indicator={() => null}
        style={{ '--height': '100vh' }}
        defaultIndex={4}
        onIndexChange={(index: number) => changeFun(index)}
      >
        <Swiper.Item>
          <ReportHome />
        </Swiper.Item>
        <Swiper.Item>
          <Summarize />
        </Swiper.Item>
        <Swiper.Item>
          <LearningSituation />
        </Swiper.Item>
        <Swiper.Item>
          <CollegeData />
        </Swiper.Item>
        <Swiper.Item className="overflow-auto">
          <Improve />
        </Swiper.Item>
        <Swiper.Item>
          <BreakThrough />
        </Swiper.Item>
      </Swiper>
    </div>
  )
}

export default DiagnosisReport
